<template>
  <div class="imageList">
    <ul>
      <li
        :class="{ active: image.selected && showSelectBtn && !previewMode }"
        v-for="(image, imageIndex) in imageList"
        :key="'editable' + imageIndex"
      >
        <div class="image">
          <el-image
            @click="selectImage(image)"
            :src="image.url"
            fit="fill"
          ></el-image>
          <el-checkbox
            v-if="showSelectBtn && !previewMode"
            v-model="image.selected"
          ></el-checkbox>
          <i
            v-if="image.deletable && !previewMode"
            @click="uploadRemove(image)"
            class="el-icon-delete"
          ></i>
          <span v-if="image.isDefault == 1 && previewMode" class="default"
            >默认</span
          >
        </div>
        <div class="imageBtn">
          <el-radio
            v-if="!previewMode"
            v-model="selectedImageSn"
            :label="image.sn"
            >默认图片</el-radio
          >
        </div>
      </li> 
    </ul>
    <el-upload
      v-if="!previewMode"
      class="upload"
      ref="upload"
      :action="uploadUrl"
      :data="uploadParams"
      :headers="uploadHeaders"
      :show-file-list="false"
      accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
      :on-success="uploadSuccess"
      :on-error="uploadError"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import constants from "@/api/constants";
import userUtils from "@/utils/userUtils";

export default {
  name: "SpuUpload",
  props: ["meta", "showSelectBtn", "previewMode", "imageList"],
  data() {
    return {
      // 上传地址
      uploadUrl: constants.baseURL + "/thirdparty/upload",
      uploadParams: {
        type: "image",
        directory: "product",
      },
      uploadHeaders: {
        "x-auth-token": userUtils.getToken(),
      },
      selectedImageSn: null,
    };
  },
  methods: {
    selectImage(image) {
      if (!this.previewMode && this.showSelectBtn) {
        image.selected = !image.selected;
      }
    },
    setDefaultImageSn(sn) {
      this.selectedImageSn = sn;
    },
    uploadRemove(image) {
      this.$emit("uploadRemove", this.meta, image);
    },
    uploadSuccess(response, file, fileList) {
      if (null != response && response.code == 200) {
        response.data.selected = true;
        response.data.deletable = true;
        this.$emit("uploadSuccess", this.meta, response.data);
      } else {
        this.$message.error(response.msg);
      }
    },
    uploadError(err, file, fileList) {
      this.$message.error("上传文件失败");
    },
  },
};
</script>

<style lang="less" scoped>
.imageList {
  display: flex;
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    li {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      list-style: none;
      height: 180px;
      width: 160px;
      border: 1px solid #efefef;
      margin-left: 10px;
      margin-bottom: 10px;
      .image {
        position: relative;
        display: flex;
        justify-content: center;
        .el-image {
          cursor: pointer;
          margin-top: 20px;
          width: 120px;
          height: 120px;
        }
        .el-checkbox {
          position: absolute;
          top: 0;
          right: 5px;
        }
        i {
          position: absolute;
          top: 5px;
          left: 5px;
          color: #aaa;
          font-size: 14px;
          cursor: pointer;
        }
        .default {
          position: absolute;
          top: 0;
          right: 0;
          padding: 2px 10px;
          font-size: 12px;
          border-left: 1px solid #efefef;
          border-bottom: 1px solid #efefef;
          color: #409EFF;
        }
      }
      .imageBtn {
        display: flex;
        justify-content: flex-end;
        margin-right: 5px;
        margin-bottom: 5px;
        :deep(.el-radio__label) {
          font-size: 12px;
        }
      }
    }
    li.active {
      border-color: #409eff;
    }
    li:first-child {
      margin-left: 0px;
    }
  }
  .upload {
    margin-left: 10px;
    width: 160px;
    height: 180px;
    border: 1px solid #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>